<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🔍 Naive UI renderHeader 测试</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/naive-ui@2.35.0/dist/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/naive-ui@2.35.0/dist/index.css">
    <style>
        body { padding: 20px; font-family: sans-serif; }
        .test-handle { 
            background: #409eff; 
            width: 4px; 
            height: 20px; 
            display: inline-block; 
            margin-left: 8px;
            cursor: col-resize;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>🔍 Naive UI renderHeader 功能测试</h2>
        <p>这个测试用于验证 renderHeader 是否能正常工作</p>
        
        <n-data-table
            :columns="columns"
            :data="data"
            style="margin-top: 20px;"
        />
        
        <div style="margin-top: 20px; background: #f0f0f0; padding: 15px;">
            <h3>预期结果：</h3>
            <ul>
                <li>✅ 第一列应该显示 "ID + 蓝色条"</li>
                <li>✅ 第二列应该显示 "名称 + 蓝色条"</li>
                <li>✅ 第三列应该显示普通的 "操作" 文字</li>
            </ul>
            <p><strong>如果看到蓝色条，说明 renderHeader 工作正常</strong></p>
        </div>
    </div>

    <script>
        const { createApp, ref, h } = Vue;
        const { NDataTable } = naive;

        createApp({
            setup() {
                console.log('🚀 开始测试 renderHeader 功能');
                
                const data = ref([
                    { id: 1, name: '测试数据1', action: '操作1' },
                    { id: 2, name: '测试数据2', action: '操作2' }
                ]);

                const columns = ref([
                    {
                        title: 'ID',
                        key: 'id',
                        width: 100,
                        renderHeader: () => {
                            console.log('✅ ID列 renderHeader 被调用');
                            return h('div', { style: { display: 'flex', alignItems: 'center' } }, [
                                h('span', 'ID'),
                                h('div', { 
                                    class: 'test-handle',
                                    onClick: () => console.log('点击了ID列调整手柄')
                                })
                            ]);
                        }
                    },
                    {
                        title: '名称',
                        key: 'name',
                        width: 200,
                        renderHeader: () => {
                            console.log('✅ 名称列 renderHeader 被调用');
                            return h('div', { style: { display: 'flex', alignItems: 'center' } }, [
                                h('span', '名称'),
                                h('div', { 
                                    class: 'test-handle',
                                    onClick: () => console.log('点击了名称列调整手柄')
                                })
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 120
                        // 没有 renderHeader，应该显示默认样式
                    }
                ]);

                console.log('📋 列配置:', columns.value);
                
                return {
                    data,
                    columns
                };
            },
            components: {
                NDataTable
            }
        }).mount('#app');
    </script>
</body>
</html>